<template>
  <div class="bar">
    <a-row :gutter="[8, 8]" class="custom">
      <a-col :span="24">
        <div class="itemWrap imgBox">
          <div class="label">
            <span>图片上传</span>
          </div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-upload
              class="imgWrap"
              name="files"
              list-type="picture-card"
              :file-list="fileList"
              :customRequest="uploadPicture"
              :remove="remove"
              @preview="handlePreview"
            >
              <div v-if="fileList.length < 5">
                <a-icon type="plus" />
                <div class="ant-upload-text">图 片</div>
              </div>
            </a-upload>
          </div>
        </div>

        <a-modal
          :visible="previewVisible"
          :footer="null"
          @cancel="handleCancel"
        >
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import api from "@/server/userConfig";

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

export default {
  name: "UploadImage",
  components: {},
  props: {
    isValid: Boolean
  },
  data() {
    return {
      imgUrl: "",
      previewVisible: false,
      previewImage: "",
      fileList: []
    };
  },
  computed: {},
  methods: {
    async inputHandle(e) {
      let mf = e.target.files[0];
      let imgFile = this.$refs.imgFile.files[0];

      let imgTypeReg = /^image$/;
      let aa = "image".match(imgTypeReg);
      let imgUrl = await getBase64(imgFile);
      this.imgUrl = imgUrl;
      let fd = new FormData();
      fd.append("file", imgFile);
      let res = await api.uploadRepairPicture(fd);
    },
    handlePreview(e) {
      console.log(e);
    },
    async uploadPicture(obj) {
      let imgFile = obj.file;
      let imgTypeReg = /^image/;
      if (!imgTypeReg.test(imgFile.type)) {
        this.$message.error("请上传图片");
        return false;
      }

      let fd = new FormData();
      fd.append("file", imgFile);

      let res = await api.uploadRepairPicture(fd);

      if (res.MsgCode !== 0) {
        this.$message.error("上传图片失败");
        return;
      }

      let { id, url } = res.Data;

      let imgUrl = await getBase64(imgFile);
      this.fileList.push({
        uid: id,
        name: imgFile.name,
        status: res.MsgCode == 0 ? "done" : "error",
        url: imgUrl,
        httpUrl: url
      });

      console.log(this.fileList);
    },

    handleCancel() {
      this.previewVisible = false;
    },

    async handlePreview(file) {
      this.previewImage = file.url;
      this.previewVisible = true;
    },

    remove(file) {
      let _this = this;
      this.$Modal.confirm({
        title: "是否删除?",
        // content: h => <div style="color:red;">Some descriptions</div>,
        onOk() {
          _this.fileList = _this.fileList.filter(item => item.uid != file.uid);
        },
        onCancel() {}
      });
    },

    getFormData() {
      let _this = this;
      let valid = false;
      let lists = [];

      if (_this.fileList.length > 0) {
        _this.fileList.forEach((item, index) => {
          let { url, status, ...rest } = item;
          lists.push({ ...rest });
        });
        valid = true;
      } else {
        lists = [];
        valid = false;
        if (_this.isValid) {
          _this.$message.error(`请至少上传一张图片`);
        }
      }

      return new Promise((resolve, reject) => {
        let validData = {
          isValid: _this.isValid ? valid : true,
          data: lists
        };
        resolve(validData);
      });
    }
  }
};
</script>

<style scoped="scoped">
.custom >>> .ant-upload-list-picture-card-container,
.custom >>> .ant-upload.ant-upload-select-picture-card,
.custom >>> .ant-upload-list-picture-card .ant-upload-list-item {
  width: 120px;
  height: 120px;
}

.bar {
  width: 100%;
  background-color: #ffffff;
  /* border: 1px solid #e8e8e8; */
  padding: 0px 16px;
}

.bar > .title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1890ff;
  padding: 0px 0px 16px 0px;
}

.itemWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.itemWrap > .label {
  /* min-width: 96px; */
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #373737;
  text-align: left;
}

.itemWrap > .separator {
  padding: 0px 4px;
}

.itemWrap > .content {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #373737;
  text-align: left;
}

.itemWrap.imgBox {
  align-items: flex-start;
}

.itemWrap.imgBox > .content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
}

.itemWrap.imgBox > .content > .imgWrap {
  /* padding: 8px 8px;
  margin: 0px 8px;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  background-color: #ffffff; */
}
</style>
